<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <title>幸运抽奖</title>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC",sans-serif}
    body{background:#f5f7fa;display:flex;justify-content:center;align-items:center;min-height:100vh;color:#333}
    .wrap{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);width:360px;max-width:95vw;padding:30px 25px;text-align:center}
    h1{font-size:26px;margin-bottom:20px;color:#333}
    textarea{width:100%;min-height:90px;resize:vertical;padding:8px;border:1px solid #dcdfe6;border-radius:6px;font-size:14px}
    label{font-size:14px;color:#666;margin:10px 0 4px;display:block;text-align:left}
    #count{font-size:28px;font-weight:bold;margin:15px 0;color:#ff4d4f}
    button{width:100%;height:46px;border:none;border-radius:6px;font-size:16px;cursor:pointer;transition:.2s}
    #drawBtn{background:#409eff;color:#fff;margin-bottom:8px}
    #drawBtn:hover{background:#66b1ff}
    #resetBtn{background:#e6a23c;color:#fff}
    #resetBtn:hover{background:#ebb563}
    #result{margin-top:20px;font-size:16px;font-weight:bold;min-height:24px;color:#67c23a}
    #export{margin-top:15px;font-size:14px;color:#409eff;text-decoration:underline;cursor:pointer}
  </style>
</head>
<body>

<div class="wrap">
  <h1>������ 幸运抽奖</h1>

  <!-- 奖品 -->
  <label>奖品（一行一个）</label>
  <textarea id="prizes" placeholder="一等奖\n二等奖\n三等奖\n谢谢参与\n谢谢参与">
一等奖
二等奖
三等奖
谢谢参与
谢谢参与
</textarea>

  <!-- 抽奖人数 -->
  <label>本轮抽出人数</label>
  <input type="number" id="num" min="1" value="1" style="width:100%;padding:8px;border:1px solid #dcdfe6;border-radius:6px;font-size:14px">

  <!-- 按钮 -->
  <button id="drawBtn">开始抽奖</button>
  <button id="resetBtn">重置结果</button>

  <!-- 结果 -->
  <div id="count">剩余奖品：<span>5</span></div>
  <div id="result"></div>
  <a id="export" style="display:none">导出结果</a>
</div>

<script>
(() => {
  const prizesEl   = document.getElementById('prizes');
  const numEl      = document.getElementById('num');
  const drawBtn    = document.getElementById('drawBtn');
  const resetBtn   = document.getElementById('resetBtn');
  const countEl    = document.querySelector('#count span');
  const resultEl   = document.getElementById('result');
  const exportEl   = document.getElementById('export');

  let pool = [];          // 剩余奖池
  let history = [];       // 已抽记录

  /* 初始化奖池 */
  function init() {
    pool = prizesEl.value.split(/\n/).filter(Boolean);
    countEl.textContent = pool.length;
    resultEl.textContent = '';
    exportEl.style.display = 'none';
  }
  init();

  /* 随机抽取 */
  function draw() {
    const n = Math.min(+numEl.value, pool.length);
    if (n === 0) return alert('没有奖品啦！');
    const drawn = [];
    for (let i = 0; i < n; i++) {
      const idx = Math.floor(Math.random() * pool.length);
      drawn.push(pool.splice(idx, 1)[0]);
    }
    history.push(...drawn);
    countEl.textContent = pool.length;
    resultEl.textContent = drawn.join('、');
    exportEl.style.display = 'inline';
  }

  /* 重置 */
  function reset() {
    history.length = 0;
    init();
  }

  /* 导出结果 */
  function exportResult() {
    const blob = new Blob([history.join('\n')], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '抽奖结果.txt';
    a.click();
    URL.revokeObjectURL(url);
  }

  /* 事件绑定 */
  drawBtn.addEventListener('click', draw);
  resetBtn.addEventListener('click', reset);
  exportEl.addEventListener('click', exportResult);
})();
</script>

</body>
</html>